<!--
* @Name: MultilevelHeadTable
* @Description: element-plus 的 el-table 多级表头
* @Author: 三咲问道
* @Date: 2024-11-16
-->

<template>
  <div class="table-content">
    <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
      <template v-for="(item,index) in headerLevels">

        <TableColumn v-if="item.children && item.children.length" :key="item.id || index" :columnHeader="item"
                     :label="item.label" :prop="item.prop">

          <template #[`Level-3-3-1-3`]="{scope}">
            <el-input v-model="scope.row['Level-3-3-1-3']"/>
          </template>

        </TableColumn>

        <el-table-column v-else :key="item.id || `${index}`" :label="item.label" :prop="item.prop"
                         align="center">

          <template #default="{row}">
            <slot :name="'Level-2'">
              <el-input v-model="row['Level-2']"/>
            </slot>
          </template>

        </el-table-column>

      </template>

    </el-table>
  </div>
</template>

<script setup lang="ts">

import {ref} from 'vue';
import TableColumn from '../../../common/components/TableColumn.vue'
import {getCodesByKey} from '@/utils/getAllTree.ts'

const tableData = ref([
  {
    'Level-1': '层级1',
    'Level-1-1': '层级Level-1-1',
    'Level-1-2': '层级Level-1-2',
    'Level-1-3': '层级Level-1-3',
    'Level-2': 'Level-2',
    'Level-3': 'Level-3',
    'Level-3-1': 'Level-3-1',
    'Level-3-1-1': 'Level-3-1-1',
    'Level-3-1-2': 'Level-3-1-2',
    'Level-3-1-3': 'Level-3-1-3',
    'Level-3-2': 'Level-3-2',
    'Level-3-2-1': 'Level-3-2-1',
    'Level-3-2-2': 'Level-3-2-2',
    'Level-3-2-3': 'Level-3-2-3',
    'Level-3-3': 'Level-3-3',
    'Level-3-3-1': 'Level-3-3-1',
    'Level-3-3-1-1': 'Level-3-3-1-1',
    'Level-3-3-1-2': 'Level-3-3-1-2',
    'Level-3-3-1-3': 'Level-3-3-1-3',
    'Level-3-3-2': 'Level-3-3-2',
    'Level-3-3-2-1': 'Level-3-3-2-1',
    'Level-3-3-2-2': 'Level-3-3-2-2',
    'Level-3-3-2-3': 'Level-3-3-2-3',
    'Level-3-3-3': 'Level-3-3-3'

  },
  {
    'Level-1': '层级1',
    'Level-1-1': '层级Level-1-1',
    'Level-1-2': '层级Level-1-2',
    'Level-1-3': '层级Level-1-3',
    'Level-2': 'Level-2',
    'Level-3': 'Level-3',
    'Level-3-1': 'Level-3-1',
    'Level-3-1-1': 'Level-3-1-1',
    'Level-3-1-2': 'Level-3-1-2',
    'Level-3-1-3': 'Level-3-1-3',
    'Level-3-2': 'Level-3-2',
    'Level-3-2-1': 'Level-3-2-1',
    'Level-3-2-2': 'Level-3-2-2',
    'Level-3-2-3': 'Level-3-2-3',
    'Level-3-3': 'Level-3-3',
    'Level-3-3-1': 'Level-3-3-1',
    'Level-3-3-1-1': 'Level-3-3-1-1',
    'Level-3-3-1-2': 'Level-3-3-1-2',
    'Level-3-3-1-3': 'Level-3-3-1-3',
    'Level-3-3-2': 'Level-3-3-2',
    'Level-3-3-2-1': 'Level-3-3-2-1',
    'Level-3-3-2-2': 'Level-3-3-2-2',
    'Level-3-3-2-3': 'Level-3-3-2-3',
    'Level-3-3-3': 'Level-3-3-3'

  },
]);

const headerLevels = ref(
    [
      {
        label: 'Level-1',
        prop: 'Level-1',
        id: '10001',
        level: 0,
        children: [
          {
            label: 'Sub-Level-1-1',
            prop: 'Level-1-1',
            id: '10002',
            level: 1,
            children: [],
          },
          {
            label: 'Sub Level 1.2',
            prop: 'Level-1-2',
            id: '10003',
            level: 1,
            children: [],
          },
          {
            label: 'Sub Level 1.3',
            prop: 'Level-1-3',
            id: '10004',
            level: 1,
            children: [],
          },
        ]
      },
      {label: 'Level-2', prop: 'Level-2', id: '10005', level: 0, children: []},
      {
        label: 'Level-3', prop: 'Level-3', id: '10006', level: 0, children: [
          {
            label: 'Sub-Level-3-1',
            prop: 'Level-3-1',
            id: '10007',
            level: 1,
            children: [
              {
                label: 'Sub-Level-3-1-1',
                prop: 'Level-3-1-1',
                id: '10010',
                level: 2,
                children: []
              },
              {
                label: 'Sub-Level-3-1-2',
                prop: 'Level-3-1-2',
                id: '10011',
                level: 2,
                children: []
              },
              {
                label: 'Sub-Level-3-1-3',
                prop: 'Level-3-1-3',
                id: '10012',
                level: 2,
                children: []
              },
            ]
          },
          {
            label: 'Sub-Level-3-2',
            prop: 'Level-3-2',
            id: '10008',
            level: 1,
            children: [
              {
                label: 'Sub-Level-3-2-1',
                prop: 'Level-3-2-1',
                id: '100081',
                level: 2,
                children: []
              },
              {
                label: 'Sub-Level-3-2-2',
                prop: 'Level-3-2-2',
                id: '100082',
                level: 2,
                children: []
              },
              {
                label: 'Sub-Level-3-2-3',
                prop: 'Level-3-2-3',
                id: '100083',
                level: 2,
                children: []
              },
            ]
          },
          {
            label: 'Sub-Level-3-3',
            prop: 'Level-3-3',
            id: '10009',
            level: 1,
            children: [
              {
                label: 'Sub-Level-3-3-1',
                prop: 'Level-3-3-1',
                id: '100091',
                level: 2,
                children: [
                  {
                    label: 'Sub-Level-3-3-1-1',
                    prop: 'Level-3-3-1-1',
                    id: '1000911',
                    level: 3,
                    children: []
                  },
                  {
                    label: 'Sub-Level-3-3-1-2',
                    prop: 'Level-3-3-1-2',
                    id: '1000912',
                    level: 3,
                    children: []
                  },
                  {
                    label: 'Sub-Level-3-3-1-3',
                    prop: 'Level-3-3-1-3',
                    id: '1000913',
                    level: 3,
                    children: []
                  },
                ]
              },
              {
                label: 'Sub-Level-3-3-2',
                prop: 'Level-3-3-2',
                id: '100092',
                level: 2,
                children: [
                  {
                    label: 'Sub-Level-3-3-2-1',
                    prop: 'Level-3-3-2-1',
                    id: '1000921',
                    level: 3,
                    children: []
                  },
                  {
                    label: 'Sub-Level-3-3-2-2',
                    prop: 'Level-3-3-2-2',
                    id: '1000922',
                    level: 3,
                    children: []
                  },
                  {
                    label: 'Sub-Level-3-3-2-3',
                    prop: 'Level-3-3-2-3',
                    id: '1000923',
                    level: 3,
                    children: []
                  },
                ]
              },
              {
                label: 'Sub-Level-3-3-3',
                prop: 'Level-3-3-3',
                id: '100093',
                level: 2,
                children: []
              },
            ]
          },
        ]
      },
    ]
);


let message: Array<number | string> = []
/**  根据第一级遍历 */
headerLevels.value.forEach(item => {
  /**  获取从第二级开始 */
  let result = getCodesByKey(item.children)
  message.push([0, ...result])
})


let row_0 = 0
let row_1 = 0
let row_2 = 0
let row_3 = 0
let row_4 = 0
let row_5 = 0

for (let i = 0; i < message.length; i++) {
  for (let j = 0; j < message[i].length; j++) {

    if (message[i][j] === 0) {
      message[i][j] = message[i][j] + '' + row_0
      row_0++
    }

    if (message[i][j] === 1) {
      message[i][j] = message[i][j] + '' + row_1
      row_1++
    }

    if (message[i][j] === 2) {
      message[i][j] = message[i][j] + '' + row_2
      row_2++
    }

    if (message[i][j] === 3) {
      message[i][j] = message[i][j] + '' + row_3
      row_3++
    }

    if (message[i][j] === 4) {
      message[i][j] = message[i][j] + '' + row_4
      row_4++
    }

    if (message[i][j] === 5) {
      message[i][j] = message[i][j] + '' + row_5
      row_5++
    }
  }
}

let colors = ['#7c9148', '#b6a114', '#9bbbac', '#f3a895', '#ecb2c1', '#d5eae1', '#fef79c',]
const headerCellStyle = ({rowIndex, columnIndex}) => {
  let rowColumnIndex = rowIndex + '' + columnIndex

  for (let i = 0; i < message.length; i++) {
    if (message[i].includes(rowColumnIndex)) {
      return {'background-color': colors[i], color: '#fff'}
    }
  }
}

</script>

<style scoped lang="less">
.table-content {
}
</style>